<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>首页</title>
    <!-- Bootstrap core CSS-->
    <link href="/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template-->
    <link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- Custom styles for this template-->
    <link href="/sb/css/sb-admin.css" rel="stylesheet">
    <link href="/css/default.css" rel="stylesheet">

    <style type="text/css">
        .content-wrapper {
            padding-top: 0rem;
        }
    </style>
</head>

<body class="bg-dark" style="overflow: hidden;" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top" id="mainNav">
    <a class="navbar-brand" href="#">【倾国倾城】管理系统</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-sidenav" id="myAccordion">
            <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
                <a class="nav-link" data-href="/pages/customer.html">
                    <i class="fa fa-fw fa-dashboard"></i>
                    <span class="nav-link-text">顾客管理</span>
                </a>
            </li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
                <a class="nav-link" data-href="/pages/product.html">
                    <i class="fa fa-fw fa-area-chart"></i>
                    <span class="nav-link-text">商品管理</span>
                </a>
            </li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
                <a class="nav-link" data-href="/pages/card.html">
                    <i class="fa fa-fw fa-area-chart"></i>
                    <span class="nav-link-text">卡项管理</span>
                </a>
            </li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Tables">
                <a class="nav-link" data-href="/pages/employee.html">
                    <i class="fa fa-fw fa-table"></i>
                    <span class="nav-link-text">雇员管理</span>
                </a>
            </li>
            <!--
            <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Components">
                <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents"
                   data-parent="#exampleAccordion">
                    <i class="fa fa-fw fa-wrench"></i>
                    <span class="nav-link-text">系统管理</span>
                </a>
                <ul class="sidenav-second-level collapse" id="collapseComponents">
                    <li>
                        <a class="nav-link" data-href="/pages/customer.html">
                            <i class="fa fa-fw fa-area-chart"></i>
                            <span class="nav-link-text">权限设置</span>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" data-href="/pages/customer.html">
                            <i class="fa fa-fw fa-area-chart"></i>
                            <span class="nav-link-text">配置管理</span>
                        </a>
                    </li>
                </ul>
            </li>
            -->
        </ul>
        <!-- 展开/折叠 -->
        <ul class="navbar-nav sidenav-toggler">
            <li class="nav-item">
                <a class="nav-link text-center" id="sidenavToggler">
                    <i class="fa fa-fw fa-angle-left"></i>
                </a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <form class="form-inline my-2 my-lg-0 mr-lg-2">
                    <div class="input-group">
                        <input class="form-control" type="text" placeholder="搜 索">
                        <span class="input-group-append">
                <button class="btn btn-primary" type="button">
                  <i class="fa fa-search"></i>
                </button>
              </span>
                    </div>
                </form>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="modal" data-target="#exampleModal">
                    <i class="fa fa-fw fa-sign-out"></i>登&nbsp;出</a>
            </li>
        </ul>
    </div>
</nav>
<div class="content-wrapper">
    <div class="container-fluid">
        <iframe id="content-iframe"
                src="content.html"
                frameborder="0"
                width="100%"
                height="100%"
                style="min-height: calc(100vh - 56px);">
        </iframe>
    </div>
    <!-- /.container-fluid-->
    <!-- /.content-wrapper-->
    <!--
    <footer class="sticky-footer">
        <div class="container">
            <div class="text-center">
                <small>Copyright © Your Website 2018</small>
            </div>
        </div>
    </footer>
    -->
    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fa fa-angle-up"></i>
    </a>
    <!-- Logout Modal-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">亲，确定退出系统-_-?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">亲，确定登出系统么？</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取&nbsp;消</button>
                    <a class="btn btn-primary" data-dismiss="modal">确&nbsp;认</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript-->
<script src="/sb/vendor/jquery/jquery.min.js"></script>
<script src="/sb/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="/sb/js/sb-admin.min.js"></script>

<script type="text/javascript">
    $(function () {

        $('#myAccordion').find('a').click(function () {
            var href = $(this).attr('data-href');
            console.log(href);
            $('#content-iframe').prop('src', href);
        });


    });
</script>

</body>

</html>
